<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="renderer" content="webkit|ie-comp|ie-stand">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <title>设备订单列表</title>
</head>

<body>
  <div id="app" v-loading.fullscreen.lock="loading">
    <div class="device-order">
      <search-btn-view btn-text="查询" @before-open="resetSearch" @search="searchData">
        <template slot="append">
          <el-button size="medium" type="primary" @click="addOrder">新增订单</el-button>
          <el-button size="medium" type="primary" @click="updateOrder">修改订单</el-button>
        </template>
        <div slot="search-content">
          <search-form :search="search" :dropdown-option="dropdownOption"></search-form>
        </div>
      </search-btn-view>
      <div class="device-order-table-div">
        <el-table fit stripe border :data="orderList" style="width: 100%" height="parent" @selection-change="toSelectOrders">
          <el-table-column fixed="left" type="selection" width="40px" align="center"></el-table-column>
          <el-table-column label="系统订单编号" prop="orderNo" min-width="140px" header-align="center"></el-table-column>
          <el-table-column label="订单编号" prop="companyOrderNo" min-width="140px" header-align="center"></el-table-column>
          <el-table-column label="工厂型号" prop="productNo" min-width="120px" header-align="center"></el-table-column>
          <el-table-column label="客户型号" prop="custVersionNo" min-width="120px" header-align="center"></el-table-column>
          <el-table-column label="客户订单号" prop="custOrderNo" min-width="120px" header-align="center"></el-table-column>
          <el-table-column label="投料数" prop="feedTotal" min-width="100px" align="center"></el-table-column>
          <el-table-column label="订单总数" prop="orderTotal" min-width="100px" align="center"></el-table-column>
          <el-table-column label="部门" prop="deptName" min-width="120px" align="center"></el-table-column>
          <el-table-column label="建单日期" width="100px" align="center">
            <template slot-scope="scope">
              <span>{{moment(scope.row.createTime).format('YYYY-MM-DD')}}</span>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="140px" align="center">
            <template slot-scope="scope">
              <el-button size="mini" type="danger" @click="deleteOrder(scope.row)">删除</el-button>
              <el-button style="margin-left:0" size="mini" type="primary" @click="lookQrcode(scope.row)">二维码</el-button>
            </template>
          </el-table-column>
        </el-table >
      </div>
      <table-pagination v-if="pagination.totalCount!==0" :pagination="pagination" @change="pageChange">
      </table-pagination>
    </div>

    <el-dialog fullscreen :title="formType==='add'?'新增订单':'修改订单'" :visible.sync="openForm" @closed="dialogClosed">
      <div style="height: 100%;overflow: auto">
        <order-form v-if="openForm" :orders="selectOrderList" :type="formType" :dropdown-option="dropdownOption" @savce-success="savceSuccess">
        </order-form>
      </div>
    </el-dialog>

    <el-dialog title="二维码" :visible.sync="openCode" top="calc(50vh - 160px)" @closed="codeClosed">
      <div>
        <qr-code v-if="openCode" :data="codeData" url="http://www.shinehao.net/weixin/weiXin/sh">
          {{selectOrder.productNo}}
        </qr-code>
      </div>
    </el-dialog>
  </div>
</body>


<script src="../../myJs/importFile.js"></script>
<script>
  importFile([
    "/vueSystem/components/css/searchBtnView.css",
    "/vueSystem/components/css/qrCode.css",
    "./css/searchForm.css",
    "./css/orderForm.css"
  ], [
    "/static/vue/qrcode.min.js",
    "/vueSystem/i18n/index.js",
    "/vueSystem/components/searchBtnView.js",
    "/vueSystem/components/qrCode.js",
    "/vueSystem/mixins/tablePaginationMixin.js",
    "/vueSystem/models/baseModel.js"
  ]);

</script>

<script src="../models/deviceOrderModel.js"></script>
<script src="./searchForm.js"></script>
<script src="./orderForm.js"></script>

<script>
  var app = new Vue({
    el: '#app',
    mixins: [tablePaginationMixin()],

    data: function () {
      var search = {
        orderNo: '',
        companyOrderNo: '',
        productNo: '',
        custVersionNo: '',
        custOrderNo: '',
        deptId: ''
      };
      return {
        loading: false,
        orderList: [],
        search: _.cloneDeep(search),
        oldSearch: _.cloneDeep(search),
        openForm: false,
        formType: '',
        selectOrderList: [],
        dropdownOption: {},
        openCode: false,
        codeData: null,
        selectOrder: null,
        moment: moment
      };
    },

    created: function () {
      this.setOrderList(true);
    },

    methods: {
      setOrderList: function (isSearch) {
        if (!isSearch) {
          this.search = _.cloneDeep(this.oldSearch);
        }

        var pagination = this.pagination;
        var currentPage = pagination.currentPage;
        var pageSize = pagination.pageSize;
        var start = (currentPage - 1) * pageSize;
        postData = {
          start: start,
          length: pageSize
        };

        var search = this.search;
        var fields = ['orderNo', 'companyOrderNo', 'productNo', 'custVersionNo', 'custOrderNo', 'deptId'];
        SysUtil.setPostData(postData, search, fields);

        this.loading = true;
        var self = this;
        ajaxRequest('createOrder/selectOrderBatchForDevice', postData, false).then(function (res) {
          if (isSearch) {
            self.oldSearch = _.cloneDeep(self.search);
          }

          var orderList = res.returnData;
          if (orderList.length === 0 && currentPage !== 1) {
            self.pagination.totalCount = res.iTotalRecords;
            self.setOrderList(isSearch);
            return;
          }

          for (var i = 0; i < orderList.length; i++) {
            var order = orderList[i];
            var createTime = order.createTime;
            order.createTime = moment(createTime).valueOf();

            var deptId = order.deptId;
            if (SysUtil.isEmpty(deptId)) {
              deptId = '';
            } else {
              deptId = Number(deptId);
            }
            order.deptId = deptId;
          }

          self.orderList = orderList;
          self.pagination.totalCount = res.iTotalRecords;
          self.loading = false;
        }).catch(function () {
          self.loading = false;
        });
      },

      resetSearch: function () {
        this.search = _.cloneDeep(this.oldSearch);
      },

      searchData: function () {
        this.pagination.currentPage = 1;
        this.setOrderList(true);
      },

      pageChange: function () {
        this.setOrderList();
      },

      toSelectOrders: function (orders) {
        this.selectOrderList = orders;
      },

      addOrder: function () {
        this.formType = 'add';
        this.openForm = true;
      },

      updateOrder: function () {
        var orderList = this.selectOrderList;
        if (orderList.length === 0) {
          this.$alert('请选择需要修改的订单', '信息');
          return;
        }

        this.formType = 'update';
        this.openForm = true;
      },

      savceSuccess: function () {
        this.openForm = false;
        this.setOrderList();
      },

      dialogClosed: function () {
        this.formType = '';
      },

      deleteOrder: function (order) {
        var self = this;
        this.$confirm('是否确定删除该设备订单', '删除确认', {
          confirmButtonText: '是',
          cancelButtonText: '否'
        }).then(function () {
          self.toDeleteOrder(order);
        }).catch(function () {});
      },

      toDeleteOrder: function (order) {
        this.loading = true;
        var self = this;
        ajaxRequest('createOrder/deleteOrderInfoPrimary', {
          id: order.id,
          'order_no': order.orderNo
        }).then(function () {
          self.$alert('该设备订单成功删除', '信息', {
            callback: function () {
              self.setOrderList();
            }
          });
          self.loading = false;
        }).catch(function () {
          self.loading = false;
        });
      },

      lookQrcode: function (order) {
        this.selectOrder = order;
        this.codeData = {
          orderId: order.orderNo
        };
        this.openCode = true;
      },

      codeClosed: function () {
        this.selectOrder = null;
        this.codeData = null;
      }
    },

    components: {
      SearchBtnView: SearchBtnView,
      SearchForm: SearchForm,
      OrderForm: OrderForm,
      QrCode: QrCode
    }
  });

</script>

<style>
  .device-order {
    padding: 10px 20px 5px;
    height: calc(100% - 15px);
    display: flex;
    flex-direction: column;
  }

  .device-order .device-order-table-div {
    flex: 1;
    overflow: auto;
  }

</style>

</html>
